pi<%@ Control Language="C#" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI.Editor.DialogControls"
    TagPrefix="dc" %>
<script type="text/javascript">
//<![CDATA[
    Type.registerNamespace("Telerik.Web.UI.Widgets");

    Telerik.Web.UI.Widgets.ImagePreviewer = function (element) {
        Telerik.Web.UI.Widgets.ImagePreviewer.initializeBase(this, [element]);
        this._tab = null;
        this._tabClickDelegate = null;
        this._multiPage = null;
        this._imageProperties = null;
        this._imageContainer = null;
        this._cleanImageContainer = null;
        this._previewedImage = null;
        this._containerBounds = null;
        this._originalBounds = null;
        this._toolbarClickDelegate = null;
        this._currentItem = "";
        this._selectedFileName = null;
        this._browser = null;
    }

    Telerik.Web.UI.Widgets.ImagePreviewer.prototype = {
        initialize: function () {
            Telerik.Web.UI.Widgets.ImagePreviewer.callBaseMethod(this, 'initialize');
            this._initializeChildren();
            this._initNoImageItem();
        },

        get_enableImageEditor: function () {
            return this._browser.get_enableImageEditor();
        },

        get_imageEditorFileSuffix: function () {
            return this._browser.get_imageEditorFileSuffix();
        },

        _initializeChildren: function () {
            this._tab = $find("imageTabStrip");
            this._multiPage = $find("imageMultiPage");
            this._imageContainer = this.get_element();
            this._containerBounds = $telerik.getContentSize(this._imageContainer);
            //compensate for larger images so they don't show scrollbars
            this._containerBounds.height = this._containerBounds.height - 3;
            this._cleanImageContainer = $get("CleanImageContainer");

            this._toolbar = $find("ImagePreviewToolBar");
            this._toolbarClickDelegate = Function.createDelegate(this, this._toolbarClickHandler);
            this._toolbar.add_buttonClicked(this._toolbarClickDelegate);
            this._selectedFileName = $get("selectedFileName");
            this._imageProperties = $find("ImageProperties");
        },

        dispose: function () {
            this._toolbarClickDelegate = null;
            this._selectedFileName = null;
            Telerik.Web.UI.Widgets.ImagePreviewer.callBaseMethod(this, 'dispose');
        },

        _setTabsEnabled: function (enabled) {
            this._tab.get_tabs().forEach(function (item) {
                item.set_enabled(enabled);
            });
        },

        /* toolbar related code */
        _toolbarClickHandler: function (sender, args) {
            var buttonValue = args._item.get_value();
            switch (buttonValue) {
                case "BestFit":
                    this._fitImage();
                    break;
                case "ActualSize":
                    this._adjustImage(this._originalBounds);
                    break;
                case "ZoomIn":
                    this._zoom(80);
                    break;
                case "ZoomOut":
                    this._zoom(-40);
                    break;
                case "ImageEditor":
                    this._openImageEditor();
                    break;
            }
        },

        _setToolbarEnabled: function (enabled) {
            this._toolbar.get_items().forEach(function (item) {
                item.set_enabled(enabled);
            });
        },

        /* zoom related code */
        _zoom: function (zoomFactor) {
            if (this._previewedImage) {
                var size = this._getZoomedSize($telerik.getBounds(this._previewedImage), zoomFactor);
                if (size.width > 2 && size.height > 2) this._adjustImage(size); //limit the zoom out till the hight or width is more dan 1 px.
            }
        },

        _getZoomedSize: function (size, zoomFactor) {
            return {
                width: size.width * (1 + zoomFactor / 100),
                height: size.height * (1 + zoomFactor / 100)
            }
        },

        _adjustImage: function (size) {
            if (!this._previewedImage) {
                return;
            }
            var containerBounds = this._containerBounds;
            var topMargin = containerBounds.height - size.height;

            topMargin = topMargin < 0 ? 0 : Math.floor(topMargin / 2);
            //The image has CSS class set that wraps it in 1 px border.
            //This border can cause scrollbars to appear on parent if image height is equal to container height
            if (topMargin <= 2) topMargin = 0;

            this._previewedImage.width = size.width;
            this._previewedImage.height = size.height;

            this._previewedImage.style.marginTop = topMargin + "px";
        },

        _fitImage: function () {
            var imageBounds = this._originalBounds;
            var wrapperBounds = this._containerBounds;

            var hRatio = imageBounds.height / wrapperBounds.height;
            var wRatio = imageBounds.width / wrapperBounds.width;

            var ratio = 1;

            if (imageBounds.width > wrapperBounds.width && imageBounds.height > wrapperBounds.height) {
                ratio = hRatio >= wRatio ? hRatio : wRatio;
            }
            else if (imageBounds.width > wrapperBounds.width) {
                ratio = wRatio;
            }
            else if (imageBounds.height > wrapperBounds.height) {
                ratio = hRatio;
            }
            var newSize = { width: Math.floor(imageBounds.width / ratio), height: Math.floor(imageBounds.height / ratio) };
            this._adjustImage(newSize);
        },

        /* image editor related code */
        _openImageEditor: function () {
            var selectedItem = this._currentItem;
            if (selectedItem != null && (selectedItem.get_permissions() & Telerik.Web.UI.FileExplorerItemPermissions.Upload) && selectedItem.get_type() == Telerik.Web.UI.FileExplorerItemType.File) {
                var browser = this.get_browser();
                var args = {};
                args.imageSrc = selectedItem.get_path();
                args.suffix = this.get_imageEditorFileSuffix();
                args.name = selectedItem.get_name();
                args.path = selectedItem.get_path();
                var callbackFunction = function (sender, args) {
                    var newSrc = null;
                    if (args && args.get_newImageSrc) {
                        newSrc = args.get_newImageSrc();
                    }
                    if (newSrc) {
                        newSrc = newSrc.substring(newSrc.lastIndexOf("/") + 1);
                        browser.get_fileBrowser().refresh(newSrc);
                    }
                }
                var dialogOpener = Telerik.Web.UI.Dialogs.CommonDialogScript.get_windowReference().get_dialogOpener();
                dialogOpener.open("ImageEditor", args, callbackFunction);
            }
        },

        _checkImageEditorDisplay: function () {
            var imageEditorItem = this._toolbar.findItemByValue("ImageEditor");
            if (imageEditorItem) {
                var selectedItem = this._currentItem;
                var hasPermission = this.get_enableImageEditor() ? selectedItem != null && (selectedItem.get_permissions() & Telerik.Web.UI.FileExplorerItemPermissions.Upload) : false;
                imageEditorItem.set_enabled(hasPermission ? true : false);
            }
        },

        _isImageAThumb: function (item) {
            this._thumbOriginalUrl = null;
            if (item.get_type() == Telerik.Web.UI.FileExplorerItemType.Directory) return false;

            //check if image ends with suffix
            var itemName = item.get_name();
            var suffix = this.get_imageEditorFileSuffix();
            if (!suffix) return false;
            suffix += ".";
            if (itemName && itemName.indexOf(suffix) == -1) return false;

            //check if original exists
            var fileExplorer = this.get_browser().get_fileBrowser();
            var originalPath = item.get_path();
            try {
                var originalExt = originalPath.substring(originalPath.lastIndexOf(suffix)).replace(suffix, ".");
                originalPath = originalPath.substring(0, originalPath.lastIndexOf(suffix)) + originalExt;
                var originalItem = fileExplorer._findItemByPath(originalPath);
                if (originalItem) {
                    this._thumbOriginalUrl = originalItem.get_url();
                    return true;
                }
            }
            catch (exc) { };
            return false;
        },

        /* previewer related code */
        setItem: function (item) {
            this._currentItem = item;
            if (item.get_type() == Telerik.Web.UI.FileExplorerItemType.Directory) {
                this._initNoImageItem();
            }
            else {
                this._initImageItem(item);
            }
            this._imageProperties.showThumbRow(this._isImageAThumb(item));
        },

        getResult: function () {
            //http://demos.telerik.com/aspnet-ajax/fileexplorer/examples/client-sideapi/clientsideevents/defaultcs.aspx
            var newImage = this._imageProperties.getModifiedImage();
            if (newImage == null && this._currentItem) {
                //for example if image size is large and the user clicks insert before it is loaded.
                newImage = new Image();
                newImage.src = this._currentItem.get_url();
                newImage.setAttribute("alt", "");
            }

            if (this._imageProperties.isThumbLinkChecked() && this._thumbOriginalUrl) {
                if (!newImage.style.border) newImage.style.borderWidth = "0px";
                var oDoc = newImage.ownerDocument;
                var oLink = oDoc.createElement("a");
                oLink.setAttribute("href", this._thumbOriginalUrl);
                if (this._imageProperties.isThumbNewWindowChecked()) {
                    oLink.setAttribute("target", "_blank");
                }
                oLink.appendChild(newImage);
                newImage = oLink;
            }
            return newImage;
        },

        getClonedImage: function (src) {
            var img = new Image();
            img.src = src;
            //Add to DOM so as to have width and height - else it returns zero
            this._cleanImageContainer.innerHTML = "";
            this._cleanImageContainer.appendChild(img);
            return img;
        },

        _initImageItem: function (item) {
            var img = new Image();
            this._previewedImage = null;
            var src = item.get_url();
            var displayName = item.get_name();

            //fix back slashes - in some browsers they don't work
            src = src.replace(/\\/g, "/");
            src = encodeURI(src);
            img.style.border = "0";
            img.style.position = "absolute";
            img.style.top = "-10000px";
            img.style.left = "-10000px";

            this._selectedFileName.innerHTML = displayName;
            this._imageContainer.innerHTML = "";
            this._imageContainer.className = "imagePreview";
            this._imageContainer.appendChild(img);
            this._setToolbarEnabled(true);
            this._setTabsEnabled(true);
            this._checkImageEditorDisplay();

            //Force a loading handler - it will be called any time we set src to the image, even if it is cached
            //IMPORTANT! IE executes the load handler for CACHED images right after the handler is attached!
            //So, to ensure that all works OK, the image must be initialized and added to the parent container prior to setting the handler
            $addHandlers(img, { "load": this._imageLoadHandler }, this);
            //NOTE: we cannot use a random src to bypass the IE browser cache here, because it will make browsing images a lot slower
            img.src = src;
        },

        _imageLoadHandler: function (e) {
            //Clear the event handler, because otherwise in FireFox (and/or IE) there is infinite recursion
            //also clearing the handlers fixes a problem with animated GIF files in IE.
            //NEW: Amazingly in some unclear cases, e.target is null!
            if (e && e.target) {
                var img = e.target;
                $clearHandlers(img);
                this._setupPreviewedImage(img);
            }
        },

        _setupPreviewedImage: function (img) {
            if (!img) {
                return;
            }
            this._previewedImage = img;
            img.style.position = "";
            img.style.top = "";
            img.style.left = "";

            this._originalBounds = { width: img.width, height: img.height };
            this._fitImage();

            var cleanImg = this.getClonedImage(img.getAttribute("src", 2));
            var initialItem = this.get_browser().get_initialItem();
            if (initialItem && initialItem.getAttribute) {
                var cleanSrc = cleanImg.getAttribute("src", 2);
                var initialSrc = initialItem.getAttribute("src", 2);
                if (cleanSrc.length > 0 && initialSrc.length > 0 && initialSrc.indexOf(cleanSrc) == initialSrc.length - cleanSrc.length) {
                    cleanImg = initialItem;
                    this.get_browser().set_initialItem(null);
                }
            }
            this._imageProperties.loadImageProperties(cleanImg);
            if ($telerik.isSafari || $telerik.isChrome) {
                //hack: when loading a new image, some browsers display 0,0 for the width,height
                //so we reset the width/height and their ratio
                this._imageProperties.get_imageWidth().value = this._originalBounds.width;
                this._imageProperties.get_imageHeight().value = this._originalBounds.height;
                this._imageProperties.set_ratio(parseInt(this._originalBounds.width) / parseInt(this._originalBounds.height));
            }
        },

        _initNoImageItem: function () {
            this._previewedImage = null;
            this._originalBounds = null;
            this._imageContainer.className = "imagePreview noImage";
            this._imageContainer.innerHTML = "&nbsp;";
            this._selectedFileName.innerHTML = "&nbsp;";
            this._setToolbarEnabled(false);
            this._tab.set_selectedIndex(0);
            this._setTabsEnabled(false);
        }
    }

    Telerik.Web.UI.Widgets.ImagePreviewer.registerClass('Telerik.Web.UI.Widgets.ImagePreviewer', Telerik.Web.UI.Widgets.FilePreviewer);
//]]>
</script>
<div class="imagePreviewer">
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td>
                <telerik:RadToolBar ID="ImagePreviewToolBar" runat="Server" Height="26px" Width="100%">
                    <Items>
                        <telerik:RadToolBarButton Text="Image Editor" ToolTip="Image Editor" Value="ImageEditor"
                            Enabled="false" CssClass="icnImageEditor" />
                        <telerik:RadToolBarButton Text="&nbsp;" ToolTip="Best Fit" Value="BestFit" Enabled="false"
                            CssClass="rtbIconOnly icnBestFit" />
                        <telerik:RadToolBarButton Text="&nbsp;" ToolTip="Actual Size" Value="ActualSize"
                            Enabled="false" CssClass="rtbIconOnly icnActualSize" />
                        <telerik:RadToolBarButton Text="&nbsp;" ToolTip="Zoom In" Value="ZoomIn" Enabled="false"
                            CssClass="rtbIconOnly icnZoomIn" />
                        <telerik:RadToolBarButton Text="&nbsp;" ToolTip="Zoom Out" Value="ZoomOut" Enabled="false"
                            CssClass="rtbIconOnly icnZoomOut" />
                    </Items>
                </telerik:RadToolBar>
            </td>
        </tr>
        <tr>
            <td>
                <telerik:RadMultiPage ID="imageMultiPage" runat="server">
                    <telerik:RadPageView ID="previewPage" runat="server" Selected="true">
                        <table cellpadding="0" cellspacing="0" width="100%">
                            <tr>
                                <td>
                                    <div id="selectedFileName" class="selectedFileName">
                                        &nbsp;</div>
                                </td>
                            </tr>
                            <tr>
                                <td valign="middle">
                                    <div id="CleanImageContainer" style="position: absolute; width: 0px; height: 0px;
                                        overflow: hidden;">
                                    </div>
                                    <div id="ImagePreviewer" class="imagePreview noImage">
                                        &nbsp;</div>
                                </td>
                            </tr>
                        </table>
                    </telerik:RadPageView>
                    <telerik:RadPageView ID="propertiesPage" runat="server">
                        <dc:SetImagePropertiesDialog ID="ImageProperties" runat="server" StandAlone="false">
                        </dc:SetImagePropertiesDialog>
                    </telerik:RadPageView>
                </telerik:RadMultiPage>
            </td>
        </tr>
        <tr>
            <td>
                <telerik:RadTabStrip ID="imageTabStrip" Width="100%" runat="server" Orientation="HorizontalBottom"
                    ShowBaseLine="true" MultiPageID="imageMultiPage">
                    <Tabs>
                        <telerik:RadTab Text="Preview" Value="Preview" Selected="true" />
                        <telerik:RadTab Text="Properties" Value="Properties" />
                    </Tabs>
                </telerik:RadTabStrip>
            </td>
        </tr>
    </table>
</div>
